<template>
    <div :class="`box ${msgType==='AI' ? 'ai' : ''}`">
        <div class="chat">
            <div class="user">
                <img :src="showHeadSculpture" alt="">
            </div>
            <div class="text speech" v-html="msg"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Chat",

    props: {
        msgType: {
            type: String,
            required: true
        },

        msg: {
            type: String,
            required: true
        }
    },

    computed: {
        // 自定义显示头像
        showHeadSculpture() {
            if (this.msgType === "AI") return require("@/assets/images/searchView/ai3.png")

            let headSculptureUrl = this.$store.state.UserModule.userInfo.headSculptureUrl
            return headSculptureUrl ? headSculptureUrl : require("@/assets/images/userView/default.png")
        },
    }
}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    box-sizing: border-box;
    padding: 25px 20px;
    animation: box ease-in-out 1.5s;

    .chat {
        width: min-content;
        margin: auto;
        display: flex;
        flex-direction: row-reverse;

        div {
            break-inside: avoid;
        }

        .user {
            width: 30px;
            height: 30px;
            border-radius: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border: var(--grayColor) solid 2px;

            img {
                display: inline;
                vertical-align: center;
                width: 100%;
            }
        }

        .text {
            width: calc(100vw - 20px - 30px - 20px);
            display: flex;
            box-sizing: border-box;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 2px;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
            justify-content: end;
        }
    }
}

.ai {
    background-color: var(--grayColor);

    .chat {
        flex-direction: row;

        .text {
            justify-content: start;
        }
    }
}

@keyframes box {
    0% {
        width: 0;
        opacity: 0;
    }
    100% {
        width: 100%;
        opacity: 1;
    }

}
</style>